<template>
  <div class="forget-container">
    <img class="app-icon" src="@/assets/img/login/app_icon.png" />
    <div class="title">上海体育局</div>
    <div class="back-view phone">
      <img src="@/assets/img/login/phone_icon.png" alt="" />
      <input type="text" placeholder="请输入手机号" v-model="phone" />
    </div>

    <div class="back-view code">
      <div class="flex_dom flex_item_center">
        <img src="@/assets/img/login/code_icon.png" alt="" />
        <input type="text" placeholder="请输入验证码" v-model="code" />
      </div>
      <div class="code-foot">
        <div class="line"></div>
        <button class="code-btn" :disabled="disabled" @click="getCode">
          {{ btnText }}
        </button>
      </div>
    </div>

    <div class="back-view pwd">
      <img src="@/assets/img/login/phone_icon.png" alt="" />
      <input type="text" placeholder="请输入新密码" v-model="pwd" />
    </div>

    <div class="back-view pwd">
      <img src="@/assets/img/login/phone_icon.png" alt="" />
      <input type="text" placeholder="请确认新密码" v-model="surePwd" />
    </div>

    <div class="forget-pwd">返回登录</div>
    <button class="back-view login-btn" @click="gobackHandle">登录</button>
  </div>
</template>

<script setup>
import { useAccount } from "@/category/useAccount";
const { 
  //手机号
  phone, 
  //验证码
  code, 
  //密码
  pwd, 
  //确认密码
  surePwd,
  //倒计时显示内容 
  btnText,
  //倒计时按钮是否可点
  disabled, 
  //获取验证码
  getCode, 
  //返回登录
  gobackHandle 
} = useAccount();
</script>

<script>
export default {
  name:"forgetPwd"
}
</script>

<style lang="less" scoped>
.forget-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 0px 40px;
  width: calc(100% - 80px);
  .app-icon {
    width: 122px;
    height: 122px;
    margin-top: 110px;
  }
  .title {
    margin-top: 32px;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #363b54;
    line-height: 44px;
  }
  .back-view {
    width: 100%;
    height: 88px;
    border-radius: 4px;
    font-size: 28px;
    font-weight: 400;
    img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      margin: 0px 15px 0px 32px;
    }
  }

  .phone {
    display: flex;
    align-items: center;
    margin-top: 96px;
    background: #f8f8fa;
  }

  .pwd {
    display: flex;
    align-items: center;
    margin-top: 32px;
    background: #f8f8fa;
  }

  .code {
    margin-top: 32px;
    background: #f8f8fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .code-foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 200px;
      .line {
        width: 2px;
        height: 32px;
        background: #d7dee6;
      }
      .code-btn {
        width: 190px;
        font-size: 28px;
        font-weight: 400;
        color: #9b9da9;
        line-height: 32px;
        background: #f8f8fa;
        border: #f8f8fa;
        border-radius: 4px;
      }
    }
  }

  .forget-pwd {
    margin-top: 30px;
    width: 100%;
    text-align: right;
  }

  .login-btn {
    margin-top: 48px;
    background: #0378fe;
    border: #0378fe;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fefeff;
    line-height: 44px;
  }
}
</style>
